<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改密码</title>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
		<link type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet"/>
		<link type="text/css" href="${pageContext.request.contextPath }/css/changePassword.css" rel="stylesheet"/>
		<script type="text/javascript">
			$(function() {
				$("#changePasswordForm").validate({
					errorClass:"errorTip",
					rules:{
						oldpassword:{
							required:true
						},
						newpassword:{
							required:true,
							rangelength:[6,12]
						},
						confirmpassword:{
							required:true,
							equalTo:"#newpasswordinput"
						}
					},
					messages:{
						oldpassword:{
							required:"请输入原密码"
						},
						newpassword:{
							required:"请输入新密码",
							rangelength:"请输入 一个长度 在{0} 和 {1} 之间的密码"
						},
						confirmpassword:{
							required:"请输入确认密码",
							equalTo:"两次输入的密码不一致"
						}
					},
					submitHandler:function() {
						changePassword();
					}
				});
			});
			
			function changePassword() {
				var formData = $("#changePasswordForm").serialize();
				$.ajax({
					type:"POST",
					data:formData,
					url:"${pageContext.request.contextPath}/user/userAction!changePassword.action",
					dataType:"json",
					success:function(data) {
						if (data.passwordError) {
							alert("原密码错误！");
							return;
						}else if (data.changeSuccess){
							window.location.href="${pageContext.request.contextPath}/user/userAction!changePasswordSuccess.action";
						}
					},
					error:function() {
						alert("出现未知错误！");
					}
				});
			}
		</script>
	</head>
	<body>
		<div class="containerDiv" style="width: 20%;"></div>
		<div class="containerDiv" style="width: 60%;background-color: #F5F5F5;">
			<form id="changePasswordForm">
				<table>
				<tr>
					<td colspan="2">
						<legend>修改密码</legend>
					</td>
				</tr>
				<tr>
					<td class="leftside" for="oldpasswordinput">原密码：</td>
					<td class="rightside"><input style="width: 40%;" class="form-control" id="oldpasswordinput" name="oldpassword" type="password"></td>
				</tr>	
				<tr>
					<td class="leftside" for="newpasswordinput">新密码：</td>
					<td class="rightside"><input style="width: 40%;" class="form-control" id="newpasswordinput" name="newpassword" type="password"></td>
				</tr>
				<tr>
					<td class="leftside" for="confirmpasswordinput">确认密码：</td>
					<td class="rightside"><input style="width: 40%;" class="form-control"  id="confirmpasswordinput" name="confirmpassword" type="password"></td>
				</tr>
				<tr>
					<td style="text-align: center;" colspan="2">
						<button type="submit" class="btn btn-primary">确认</button>
					</td>
				</tr>
			</table>
			</form>
		</div>
		<div class="containerDiv" style="width: 20%;"></div>
	</body>
</html>
